<template>
  <Drawer width="560" :styles="styles" :model-value="show" @on-close="onClose" :title="username">
    <div class="user-drawer-container">
      <p :style="pStyle">用户信息</p>
      <div>
        <Row>
          <Col span="12">
          <span class="field">联系方式：{{ userInfo.phoneNo }}</span>
          </Col>
          <Col span="12">
          <span class="field">岗位角色：<template v-if="userInfo.roleCodeNames && userInfo.roleCodeNames.length">
              <Tag v-for="(item, index) in userInfo.roleCodeNames" :key="index" :color="colors[index]">{{ item }}
              </Tag>
            </template>
            <span v-else>无</span>
          </span>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <span class="field">所属团队：{{ userInfo.deptName }}@{{ userInfo.l1UserName }}</span>
          </Col>
          <Col span="12">
          <span class="field">加入时间：{{ userInfo.createTime }}</span>
          </Col>
        </Row>
        <Row>
          <Col span="12" v-if="userInfo.cityName">
          <span class="field">所在城市：{{ userInfo.cityName }}</span>
          </Col>
        </Row>
      </div>
      <Divider />
      <p :style="pStyle">业绩信息</p>
      <div>
        <KpiChart :comissionData="comissionData" />
      </div>
      <Divider />
    </div>
  </Drawer>
</template>
<script>
import { mapState } from 'vuex';
import KpiChart from './kpi-chart.vue';
import { getUserInfoById } from '@/api/user';
import { formatCity } from '@/libs/tools';

export default {
  components: {
    KpiChart
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    username: {
      type: String,
      default: ''
    },
    userId: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState('admin/role', [
      'roles'
    ]),
  },
  data() {
    return {
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      pStyle: {
        fontSize: '15px',
        color: 'rgba(0, 0, 0, 0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      },
      userInfo: {},
      comissionData: [],
      colors: ['magenta', 'volcano', 'cyan', 'purple', 'geekblue'],
    }
  },
  methods: {
    onClose() {
      this.$emit('onClose')
    },
    async getData() {
      const data = await getUserInfoById({
        userId: this.userId
      })
      if (data.roleCodeList && data.roleCodeList.length) {
        data.roleCodeNames = data.roleCodeList.map(roleCode => {
          const userRole = this.roles.find(role => role.roleCode === roleCode)
          if (userRole) {
            return userRole.roleName
          } else {
            return ''
          }
        })
      } else {
        data.roleCodeNames = []
      }
      if (data.workCity) {
        data.cityName = formatCity(data.workCity)
      } else if (data.province) {
        data.cityName = province
      } else {
        data.cityName = '无'
      }
      this.userInfo = data
      this.comissionData = data.comissionMountList || []
    }
  },
  watch: {
    userId() {
      this.getData()
    }
  }
}
</script>
<style lang="less">
.user-drawer-container {
  .ivu-row {
    height: 26px;
  }

  .field {
    font-size: 13px;
  }
}
</style>